<template>
    <div class="content-wrapp">
        <el-button
            v-if="addEnable"
            type="primary"
            @click="$refs.modal.add()"
            size="small"
            icon="el-icon-circle-plus-outline"
        >新建</el-button>
        <el-table
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="menuId"
            :tree-props="{children: 'children'}"
            v-loading="loading"
        >
            <el-table-column prop="menuName" label="权限名称" sortable width="200"></el-table-column>
            <el-table-column prop="menuKey" label="路由唯一键" sortable width="150"></el-table-column>
            <el-table-column prop="component" label="组件" width="180"></el-table-column>
            <el-table-column prop="orderNum" label="排序"></el-table-column>
            <el-table-column prop="menuType" label="按钮类型">
                <template slot-scope="scope">{{scope.row.menuType | menuTypeFilter}}</template>
            </el-table-column>
            <el-table-column prop="path" label="链接"></el-table-column>
            <el-table-column prop="redirect" label="重定向"></el-table-column>
            <el-table-column prop="perms" label="权限标识" width="150"></el-table-column>
            <el-table-column prop="visible" label="状态">
                <template slot-scope="scope">{{scope.row.visible | statusFilter}}</template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="240">
                <template slot-scope="scope">
                    <el-button
                        v-if="editEnabel"
                        @click.native.prevent="handleEdit(scope.row)"
                        type="success"
                        size="mini"
                    >编辑</el-button>
                    <el-button
                        v-if="addEnable"
                        @click.native.prevent="handleAdd(scope.row)"
                        type="primary"
                        size="mini"
                    >新增</el-button>
                    <el-button
                        v-if="removeEnable"
                        @click.native.prevent="delById(scope.row.menuId)"
                        type="danger"
                        size="mini"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <permission-modal ref="modal" @ok="handleOk" />
    </div>
</template>

<script>
import { getPermissions, delPerm } from "@/api/system";
import { treeData } from "@/utils/treeutil";
import { checkPermission } from "@/utils/permissions";
import PermissionModal from "./modules/PermissionModal.vue";
const ERR_OK = 200;
export default {
    components: {
        PermissionModal
    },
    data() {
        return {
            tableData: [],
            formData: {},
            loading: true,
            addEnable: checkPermission("system:menu:add"),
            editEnabel: checkPermission("system:menu:edit"),
            removeEnable: checkPermission("system:menu:remove")
        };
    },
    filters: {
        statusFilter(status) {
            const statusMap = {
                "1": "隐藏",
                "0": "显示"
            };
            return statusMap[status];
        },
        menuTypeFilter(type) {
            const menuMap = {
                M: "目录",
                F: "按钮",
                C: "菜单"
            };
            return menuMap[type];
        }
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            this.loading = true;
            getPermissions(Object.assign(this.formData)).then(res => {
                this.tableData = treeData(res.data.rows, "menuId");
                this.loading = false;
            });
        },
        handleEdit(record) {
            this.$refs.modal.edit(record);
        },
        handleAdd(item) {
            this.$refs.modal.add(item);
        },
        handleOk() {
            this.getData();
        },
        delById(id) {
            delPerm(id).then(res => {
                if (res.data.code === ERR_OK) {
                    this.$message.success(`删除成功`);
                    this.handleOk();
                } else {
                    this.$message.error(res.data.msg);
                }
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.content-wrapp {
    padding: 20px;
}
</style>